<div class="add_roll" (click)="onClose(0)" >
      <div class="add_roll_container clearfix" @fadeIn  (click)="$event.stopPropagation()">
        <div class="close f_r" (click)="onClose(0)" nzTitle="关闭" nzPlacement="topCenter" nz-tooltip>×</div>
        <p class="title">{{addRoll.isUpdate?'修改':'添加'}}班级</p>
        <div class="add_cover clearfix">
          <div class="upload_cover">
          <p class="little_title" style="margin-bottom: 6px">封面</p>
            <div class="loading" *ngIf="addRoll.isLoading"> <nz-spin [nzSize]="'large'"></nz-spin></div>
            <div *ngIf="!addRoll.isLoading" class="add-cover" [style.background-image]="'url('+utileServe.readImgUrl+addRoll.coverUrl+')'" style="background-size: cover;background-position: center">
              <form enctype="multipart/form-data" class="upload-class">
                <input type="file" name="uploadimg" (change)="uploadCover($event)">
              </form>
              <div  style="position: relative;width: 196px;height: 190px">
                <img src="/assets/img/rollIndex/coverLogo.png" class="add-cover-icon" *ngIf="!addRoll.coverUrl">
                <p class="support" *ngIf="!addRoll.coverUrl">上传封面或</p>
                <p class="add-cover-tips" *ngIf="!addRoll.coverUrl">从右边选取默认封面</p>
                <img class="" src="/assets/img/rollIndex/coverUpdate.png" alt="" width="30" height="30" style="margin-top: 20px;cursor: pointer;margin-right: 16px;position: absolute;right: 0;z-index: 199;bottom: -50px">
              </div>
            </div>
          </div>
          <div class="default_cover f_r">
            <div class="default_cover_div" [style.background-image]="'url('+readImgUrl+addRoll.coverArr[0]+')'" [ngClass]="{'gray':!(addRoll.coverGrey||addRoll.coverGreyArr[0])}" (click)="addRoll.getDefaultCover(0)" (mouseenter)="addRoll.hoverChangeGrey(0,true)" (mouseleave)="addRoll.hoverChangeGrey(0,false)">
               <div class="cover_select" *ngIf="addRoll.coverUrl ==addRoll.coverArr[0]"><label nz-checkbox [ngModel]="true" ></label></div>
            </div>
            <div class="default_cover_div" [style.background-image]="'url('+readImgUrl+addRoll.coverArr[1]+')'" [ngClass]="{'gray':!(addRoll.coverGrey||addRoll.coverGreyArr[1])}" (click)="addRoll.getDefaultCover(1)" (mouseenter)="addRoll.hoverChangeGrey(1,true)" (mouseleave)="addRoll.hoverChangeGrey(1,false)">
              <div class="cover_select" *ngIf="addRoll.coverUrl ==addRoll.coverArr[1]"><label nz-checkbox [ngModel]="true" ></label></div>
            </div>
            <div class="default_cover_div" [style.background-image]="'url('+readImgUrl+addRoll.coverArr[2]+')'" [ngClass]="{'gray':!(addRoll.coverGrey||addRoll.coverGreyArr[2])}" (click)="addRoll.getDefaultCover(2)" (mouseenter)="addRoll.hoverChangeGrey(2,true)" (mouseleave)="addRoll.hoverChangeGrey(2,false)">
              <div class="cover_select" *ngIf="addRoll.coverUrl ==addRoll.coverArr[2]"><label nz-checkbox [ngModel]="true" ></label></div>
            </div>
            <div class="default_cover_div" [style.background-image]="'url('+readImgUrl+addRoll.coverArr[3]+')'" [ngClass]="{'gray':!(addRoll.coverGrey||addRoll.coverGreyArr[3])}" (click)="addRoll.getDefaultCover(3)" (mouseenter)="addRoll.hoverChangeGrey(3,true)" (mouseleave)="addRoll.hoverChangeGrey(3,false)">
              <div class="cover_select" *ngIf="addRoll.coverUrl ==addRoll.coverArr[3]"><label nz-checkbox [ngModel]="true" ></label></div>
            </div>
          </div>
        </div>
        <div class="form">
        <div class="add_roll_name">
          <p class="little_title">班级名称<span>{{addRoll.title.length}}/20</span></p>
          <input  [(ngModel)]="addRoll.title" name="title"  maxlength="20"   placeholder="请输入班级名称"  style="width: 414px;height: 36px; line-height: 36px;padding-left: 10px;font-size: 14px;color: #FFFFFF;background-color: rgb(153,153,153);margin-top: 2px;border: 1px solid #d9d9d9;border-radius: 4px;">
        </div>
        <div class="add_roll_end_time">
          <p class="little_title">到期时间</p>
          <nz-date-picker [nzFormat]="dateFormat" [ngModel]="addRoll.endTime"  [nzDisabledDate]="disabledDate" [nzStyle]="selectDateStyle"  (ngModelChange)="addRoll.getEndTime($event)"></nz-date-picker>
        </div>
        <div class="add_code">
          <p class="little_title">邀请码</p>
          <input type="text"  maxlength="5" [(ngModel)]="addRoll.rollCode" placeholder='请输入5位数字邀请码' style="width: 414px;height: 36px; line-height: 36px;padding-left: 10px;font-size: 14px;color: #FFFFFF;background-color: rgb(153,153,153);margin-top: 2px;border: 1px solid #d9d9d9;border-radius: 4px;">
          <div class="code_icon"><img src="/assets/img/rollIndex/suiji.png" alt="" width="16" height="14" (click)="addRoll.createCode()"></div>
        </div>
        <!--<button nz-button nzType="primary" (click)=" uploadAddRoll()" style="width: 413px;height: 40px;line-height: 40px;text-align: center;background-color:#f88a99;font-size: 16px;letter-spacing:10px;">确定-->
        <!--</button>-->
        <div class="upload_btn" (click)=" uploadAddRoll()">确定</div>
        </div>
      </div>
</div>
